<template>
  <div>

    <!-- <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="男女比">
              <template slot="formatter"> 456/2 </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :value="like ? 521 : 520" title="Feedback">
              <template slot="suffix">
                <span @click="like = !like" class="like">
                  <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                  <i class="el-icon-star-off" v-show="!like"></i>
                </span>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <!-- 上一半 -->
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="module">
            <el-descriptions style="margin: 10px;" direction="vertical" :column="4" border>
              <el-descriptions-item label="用户名">{{userInfo.userName}}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{userInfo.phone}}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{userInfo.email}}</el-descriptions-item>
              <el-descriptions-item label="性别" :span="2">{{userInfo.gender==0?'男':'女'}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="module">
            <div style="width: 100%;text-align: left;">
              <el-select style="width: 100px;margin-left: 20px;" v-model="top" placeholder="top" size="mini">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <ECharts class="chart" :option="storageData"></ECharts>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 下一半 -->
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="module">
            <ECharts class="chart" :option="uploadData"></ECharts>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="module">
            <div style="width: 100%;text-align: left;">
              <el-select clearable style="width: 100px;margin-left: 20px;" v-model="role" placeholder="role"
                size="mini">
                <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <ECharts class="chart" :option="registerData"></ECharts>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import link from "@/api/Link.js";
  import apiUrl from "@/api/url";
  import sizeTostr from '@/util/FileSizeUtil'
  export default {
    name: "AdminHome",
    data () {
      return {
        //存储详情
        storageData: {
          title: {
            text: "分配空间详情",
            left: "center",
          },
          label: {
            show: true,
            formatter (param) {
              // correct the percentage
              return param.name + ' (' + param.percent + '%)';
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "空间",
              type: "pie",
              radius: "60%",
              data: [
                // { value: 0, name: "剩余空间" },
                // { value: 0, name: "文档" },
                // { value: 0, name: "图片" },
                // { value: 0, name: "视频" },
                // { value: 0, name: "其他" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        },
        //最近上传
        uploadData: {
          title: {
            text: "最近上传",
            left: "center",
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              areaStyle: {}
            }
          ]
        },
        //用户增长
        registerData: {
          title: {
            text: "用户增长",
            left: "center",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [0, 0, 0, 0, 0, 0, 0],
              type: "line",
              areaStyle: {}
            },
          ],
        },
        userInfo: JSON.parse(localStorage.getItem('user')),
        options: [{
          value: '5',
          label: 'Top:5'
        }, {
          value: '10',
          label: 'Top:10'
        }, {
          value: '20',
          label: 'Top:20'
        },],
        top: '5',
        roles: [{
          value: '0',
          label: '管理员'
        }, {
          value: '1',
          label: '用户'
        },],
        role: '1',
      };
    },
    computed: {},
    methods: {
      init () {
        //存储空间信息数据获取
        link(apiUrl.baseUrl + '/sys/storage/getInfoAdmin/v1?top=' + this.top, 'POST').then(ok => {
          if (ok.data.code == 0) {
            this.storageData.series[0].data = []
            for (let i = 0; i < ok.data.data.length; i++) {
              let element = {
                value: ok.data.data[i].currSize,
                name: ok.data.data[i].userName,
              }
              this.storageData.series[0].data.push(element)
            }
          } else {
            this.$message({
              type: 'error',
              msg: ok.data.msg
            })
          }
        })

        //获取用户上传数据
        link(apiUrl.baseUrl + '/sys/user/getUploadInfo/v1', 'POST').then(ok => {
          if (ok.data.code == 0) {
            this.uploadData.xAxis.data = []
            this.uploadData.series[0].data = []
            for (let j = 0; j < ok.data.data.length; j++) {
              this.uploadData.xAxis.data.push(ok.data.data[j].date.substring(5))
              this.uploadData.series[0].data.push(ok.data.data[j].count)
            }
          } else {
            this.$message({
              type: 'error',
              msg: ok.data.msg
            })
          }
        })
        //获取用户注册数据
        link(apiUrl.baseUrl + '/sys/user/getRegisterInfo/v1?role=' + this.role, 'POST').then(ok => {
          if (ok.data.code == 0) {
            this.registerData.xAxis.data = []
            this.registerData.series[0].data = []
            for (let j = 0; j < ok.data.data.length; j++) {
              this.registerData.xAxis.data.push(ok.data.data[j].date.substring(5))
              this.registerData.series[0].data.push(ok.data.data[j].count)
            }
          } else {
            this.$message({
              type: 'error',
              msg: ok.data.msg
            })
          }
        })

      },

    },
    mounted () {
      this.init()
    },
    watch: {
      role (curVal, oldVal) {
        this.init()
      },
      top (curVal, oldVal) {
        this.init()
      },
    }
  };
</script>

<style scoped>
  .chart {
    height: 100%;
    width: 100%;
  }

  .module {
    background-color: rgb(249, 237, 237);
    height: 270px;
    margin: 10px 0px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid rgb(53, 52, 52);
    /* box-shadow: 5px 5px 5px 5px rgba(133, 133, 132, 0.5) */
  }
</style>